﻿<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
	var chart = new CanvasJS.Chart("chartContainer",
	{
		title: {
			text: "Basic Range Column Chart"
		},
		axisY: {
			includeZero: false,
			interval: 10,
			title: "Temperature (C)"
		},
		axisX: {
			interval: 1,
			intervalType: "month",
			valueFormatString: "MMM"
			},
		data: [
		{
			type: "rangeColumn",
			color: "#369EAD",
			dataPoints: [
				{ x: new Date(2012,00,01), y: [-9.7, 10.4] },  // y: [Low ,High]
				{ x: new Date(2012,01,01), y: [-8.7, 16.5] },
				{ x: new Date(2012,02,01), y: [-3.5, 19.4] },
				{ x: new Date(2012,03,01), y: [5.0, 22.6] },
				{ x: new Date(2012,04,01), y: [7.9, 29.5] },
				{ x: new Date(2012,05,01), y: [9.2, 34.7] },
				{ x: new Date(2012,06,01), y: [7.3, 30.5] },
				{ x: new Date(2012,07,01), y: [4.4, 25.5] },
				{ x: new Date(2012,08,01), y: [-3.1, 20.4] },
				{ x: new Date(2012,09,01), y: [-5.2, 15.4] },
				{ x: new Date(2012,10,01), y: [-13.5, 9.8] },
				{ x: new Date(2012,11,01), y: [-15.5, 5.8] }
			]
		}
		]
	});
	chart.render();
}
</script>
	<script src="../../canvasjs.min.js"></script>
	<title>CanvasJS Example</title>
</head>
<body>
<div id="chartContainer" style="height: 400px; width: 100%;">
</div>
</body>
</html>